<template>
  <view-box ref="viewBox" body-padding-bottom="0" class="container">
    <div class="width-pokjh">
      <div class="search-opu">
        <div class="border-search">
          <i slot="icon" style="margin-left: 3%;font-size: 18px;" class="iconfont icon-sousuo"></i>
          <input class="" v-model="keywords" @on-cancel="cancel" type="search" placeholder="公司名称"/>
        </div>
      </div>
      <div class="searc-qixoa">
        <span style="color:#fff;"  @click="submit">搜索</span>
      </div>
    </div>
    <div style="height: 46px;"></div>
    <div style="height:1px;width:100%;background:#f4f4f4"></div>
    <div class="lishi">
      <p style="font-size: 15px;color: #999;display: flex;justify-content: space-between">
        历史记录
        <span style="text-align: right" @click="showConfirm"><i  slot="icon" style="font-size:22px;" class="iconfont icon-shanchu"></i ></span>
      </p>
      <p>
         <span v-for="(item, index) in keyHistorys" :key="index" v-if="item !== ''" @click="$router.push('/companyList?keywords=' + item)">{{item}}</span>
      </p>
    </div>
  </view-box>
</template>

<script>
  import { Flexbox, FlexboxItem, XImg, ViewBox, XHeader, Grid, GridItem, XInput, XButton, Radio, Group, CellBox, XAddress, ChinaAddressV4Data } from 'vux'
  export default {
    name: 'Certification',
    components: {
      Flexbox,
      FlexboxItem,
      XImg,
      ViewBox,
      XHeader,
      Grid,
      GridItem,
      CellBox,
      XInput,
      XButton,
      Radio,
      Group,
      XAddress
    },
    data () {
      return {
        keywords: '',
        keyHistory: [],
        keyHistorys: [],
        addressData: ChinaAddressV4Data,
        value: [],
        showAddress: false,
        addBasic: {
          province: '',
          city: '',
          area: ''
        },
        postPlg: 'position',
        yesborder: 'yesborder'
      }
    },
    mounted () {
      var optionss = localStorage.getItem('historyItems')
      if (optionss !== null) {
        this.keyHistorys = optionss.split(',')
      }
    },
    methods: {
      showadds () {
        this.showAddress = true
      },
      listaddr (ids, names) {
        console.log(names)
        this.addBasic = {
          province: names[0],
          city: names[1],
          area: names[2]
        }
      },
      doShowAddress () {
        this.showAddress = true
        setTimeout(() => {
          this.showAddress = false
        }, 2000)
      },
      cancel () {
        this.keywords = null
      },
      submit () {
        this.keywords !== '' ? this.keyHistory.push(this.$router.push('/companyList?keywords=' + this.keywords), this.keywords) : this.keyHistory.push(this.$router.push('/companyList?keywords=' + this.keywords + this.keywords))
        let { historyItems } = localStorage
        if (historyItems === undefined) {
          localStorage.historyItems = this.keyHistory
        } else {
          const onlyItem = historyItems.split(',').filter(e => e !== this.keyHistory)
          if (onlyItem.length > 0) historyItems = this.keyHistory + ',' + onlyItem.join(',')
          localStorage.historyItems = historyItems
        }
        // console.log(this.keyHistorys)
        // this.$router.push('/prouductlist?keywords=' + this.keywords)
      },
      showConfirm () {
        let _this = this
        this.$vux.confirm.show({
          title: '删除历史记录？',
          content: '',
          onConfirm () {
            _this.$set(_this, 'keyHistory', [])
            localStorage.removeItem('historyItems')
          }
        })
      }
    }
  }
</script>

<style scoped>
.back-search{
  background: #fff;
  width: 100%;
  position: fixed !important;
  top: 0;
  z-index: 11;
}
.backgr-regis{
  border-radius: 8px;
  width: 96%;
  margin-left: 2%;
  box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);
  margin-top: 30px;
}
.border-search{
  width: 90%;
  border: #f2f2f2 solid 1px !important;
  background: #f2f2f2;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  margin-left: 5%;
  margin-top: 5px;
  display: flex;
}
  .border-search input{
    width: 100%;
    border: #f2f2f2 solid 0px !important;
    background: #f2f2f2;
    height: 32px;
    border-radius: 16px;
    display: flex;

  }
  .remsous{
    width: 94%;
    margin-left: 3%;
  }
  .remsous p{
    display: flex;
    margin-top: 10px;
  }
  .remsous span{
    margin-left: 10px;
    background: #f4f4f4;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 12px;
  }
  .lishi{
    width: 94%;
    margin-left: 3%;
  }
  .lishi p{
    display: flex;
    margin-top: 10px;
    flex-wrap: wrap;
  }
  .lishi span{
    margin-left: 10px;
    background: #f4f4f4;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 12px;
    margin-top: 5px;
  }
  .zhiwei{
    width: 100%;
    display: flex;

  }
  .zhiwei label{
    width: 50%;
    text-align: center;
    margin-bottom: -1px;
  }
  .yesborder{
    border-bottom: 2px solid #519DF3;
    padding: 5px;
  }
  .no-border{
    padding: 5px;
  }
  .width-pokjh{
    width: 100%;
    height: 50px;
    background: #32B6C6;
    position: fixed;
    top: 0px;
    left: 0px;
    display: flex;
  }
  .search-opu{
    width: 80%;
    display: flex;
    margin-top: 3px;
  }
  .searc-qixoa{
    width: 20%;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .addss-search{
    width: 30%;
  }
  .wid-spouy{
  width: 80%;
  border: #f2f2f2 solid 1px !important;
  background: #f2f2f2;
  height: 32px;
  line-height: 32px;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  margin-top: 5px!important;
  margin-left:20%;
  }
</style>
<style>
  .back-search h1{
    color: #000 !important;
    display: flex;
  }
  .opoi .vux-no-group-title{
    margin-top:0 !important;
  }
  .weui-cells:before{
        border-top: 0px solid #D9D9D9 !important;
  }
  .weui-cells:after{
        border-bottom: 0px solid #D9D9D9 !important;
  }
  .back-search .vux-header-title-area, .vux-header .vux-header-title{
    margin: 0 60px !important;
  }
  .weui-cell:before {
    border-top: 0px solid #D9D9D9 !important;
  }
  .wid-spouy .weui-cells {
    margin-top: 1.25em;
    background-color: rgba(0,0,0,0)!important;
    line-height: 32px!important;
    font-size: 13px!important;
    overflow: hidden;
    position: relative;
    padding-left:5px;
}
</style>